<template>
    <div class="a">
        <div class="top">
            <div class="topleft">
                蒋先生
            </div>
            <div class="topright">
                <el-icon :size="30"><Setting /></el-icon>
            </div>
        </div>  
        <div class="dingdan">
            <div class="d">
                <h3>我的订单</h3>
            </div>
            <div class="f">
                <div style="text-align: center;"><div class="f1"><Money style="width: 1.5em; height: 2em;" /></div><p>待付款</p></div>
                <div style="text-align: center;"><div class="f1"><Refrigerator style="width: 1.5em; height: 2em;" /></div><p>待收货</p></div>
                <div style="text-align: center;"><div class="f1"><Help style="width: 1.5em; height: 2em; "/></div><p>待评价</p></div>
                <div style="text-align: center;"><div class="f1"><Coin style="width: 1.5em; height: 2em; "/></div><p>退货/售后</p></div>
                <div style="text-align: center;"><div class="f1"><Grid style="width: 1.5em; height: 2em;"/></div><p>全部订单</p></div>
            </div>
        </div>
        <div class="you">
            <div class="y1">
                <h2>优惠券</h2>
            </div>
            <div class="y2">
                <h2>签到领福利</h2>
            </div>
        </div>
        <div class="chou">
            <div>
                <img src="./img/huawei1.png" alt="" srcset="" class="im1" style="height:calc(90rem/3.75);margin-top:1rem;margin-left: 1rem;">
            </div>
            <div class="c1">
                <h2>抽奖送手机</h2>
                <p>截止日期：2022.12.12 08:00</p>
            </div>
            <div class="b1">
                <el-button>立即参加</el-button>
            </div>
        </div>
        <div class="bottom">
            <ul>
                <li><el-icon><Watermelon /></el-icon>收货地址</li>
                <li><el-icon><Sugar /></el-icon>我的收藏</li>
                <li><el-icon><IceTea /></el-icon>意见反馈</li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
let getwidth = () => {
    var htmle = document.documentElement;
    var html = htmle.clientWidth / 100;
    htmle.style.fontSize = html + 'px';
}
onMounted(() => {
    window.addEventListener('resize', getwidth)
    getwidth()
})
</script>

<style lang="scss" scoped>
*{
    padding:0;
    margin:0;
}
.a{
    width:100vw;
    background-color: #F2F2F2;
    float: left;
}
.top{
    width:100vw;
    height:calc(132vh/8.44);
    background-color: #F57C15;
    border-radius: 0 0 10rem 10rem;
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    .topright{
        padding-right: 3rem;
    }
}
.dingdan{
    width: 100vw;
    height:calc(218vh/8.44);
    background-color: white;
    .d{
        width: 90%;
        height: calc(50vh/8.44);
        line-height:calc(50vh/8.44);
        margin: 0 auto;
    }
    .f{
        width:90%;
        height: calc(71vh/8.44);
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        .f1{
            display: inline-block;
            width:calc(31rem/3.75);
            height: calc(35rem/3.75);
            background-color: #F57C15;
            border-radius:8px;
            color: white; 
        }
        p{
            margin-top: 1rem;
        }
    }
}
.you{
    width:97vw;
    margin: 0 auto;
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    .y1{
        width:48vw ;
        height: calc(70rem/3.75);
        background-color: white;
    }
    .y2{
        width:48vw ;
        height: calc(70rem/3.75);
        background-color: white;
    }
}
.chou{
    width:97vw;
    height: calc(98rem/3.75);
    margin: 0 auto;
    margin-top: 1rem;
    background-color: #F09B7C;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .c1{
        h2{
            color: white;
        }
        p{
            color: #D4B8AA;
        }
    }
    .b1{
        margin-right: 2rem;
    }
}
.bottom{
    background-color: white;
    width: 100vw;
    height: calc(150rem/3.75);
    ul{
        list-style-type: none;
        width: 85%;
        margin: 0 auto;
        li{
            font-size: calc(18rem/3.75);
            margin-top: 2rem;
            margin-bottom: 3rem;
            .el-icon{
                margin-right: 5rem;
            }
        }
    }
}
</style>